import HomeHead from "@/components/HomeHead.jsx";
import {useEffect, useRef, useState} from "react";
import dayjs from "dayjs";
import '@/views/Home.scss'
import {Swiper} from "antd-mobile";
import {Link} from "react-router-dom";
import {queryNewsBefore, queryNewsLatest} from "@/api/index.js";
import {Divider, DotLoading, Image} from "antd-mobile/2x";
import NewsItem from "@/components/NewsItem.jsx";
import SkeletonAgain from "@/components/SkeletonAgain.jsx";

const Home = function Home() {
    let [today, setToday] = useState(dayjs().format('YYYYMMDD')),
        [bannerData, setBannerData] = useState([]),
        [newsList, setNewsList] = useState([]),
    [isHasMore, setIsHasMore] = useState(true)

    const loadMore = useRef()
//第一次渲染完毕向服务器发送请求
    useEffect(() => {
        (async () => {
            try {
                let {data} = await queryNewsLatest()
                const {stories, date, top_stories} = data
                setBannerData(top_stories)
                setToday(date.replace(/-/g, ''))
                newsList.push(...stories)
                setNewsList([...newsList])
            } catch (e) { /* empty */
            }
        })()
    }, []);

    useEffect(() => {
        let ob = new IntersectionObserver(async (entries) => {
            let {isIntersecting} = entries[0]
            if(isIntersecting){
                try{
                    if(!newsList.length) return
                    let time = newsList[newsList.length - 1].date
                    const {data} = await queryNewsBefore(time);

                    if(!data.date){
                        setIsHasMore(false)
                        ob.unobserve(loadMoreBox)
                        ob = null
                        return
                    }
                    newsList.push(data)
                    setNewsList([...newsList])
                }catch (e) {
                    console.error(e)
                }
            }
        })
        let loadMoreBox = loadMore.current
        ob.observe(loadMore.current)

        return () => {
            ob && ob.unobserve(loadMoreBox)
            ob = null
        }
    }, [newsList])
    return <div className="home-box">
        <HomeHead today={today}/>
        <div className="swiper-box">
            {bannerData.length > 0 && <Swiper autoplay={true} loop={true}>
                {bannerData.map(item => {
                    const {id, image, title, hint} = item
                    return <Swiper.Item key={id}>
                        <Link to={`/detail/${id}`}>
                            <Image src={image} lazy/>
                            <div className="desc">
                                <h3 className="title">{title}</h3>
                                <p className="author">{hint}</p>
                            </div>
                        </Link>
                    </Swiper.Item>
                })}
            </Swiper>}
        </div>
        {newsList.length === 0 ?
            <SkeletonAgain/> :
            <>{
                newsList.map(item => {
                    const {date, stories} = item
                    return <div className="news-box" key={date}>
                        <Divider contentPosition="left">{date}</Divider>
                        <div className="list">
                            {
                                stories.map(c => {
                                    const {id} = c
                                    return <NewsItem key={id} info={c}/>
                                })
                            }
                        </div>
                    </div>
                })
            }</>
        }


        <div className="load-more-box" ref={loadMore} style={{
            display: newsList.length > 0 && isHasMore ? 'block' : 'none'
        }}>
            <DotLoading/> <span>加载更多</span>
        </div>
    </div>
        ;
}
export default Home